<html lang="en-US"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
	<title>JoyStick</title>
	
    <style type="text/css">
body{
  background: #35393d;
}
.controls_ui{ 
  width: 300px; 
  margin: 40px auto;
}
.button{
  color: #0f1214;
  text-shadow:0 1px 0 #484f58;
  margin-bottom: 20px;
  margin-right: 5px;
  border:1px solid #202124;
  box-shadow: 0 1px 0 #616a74 inset,0 1px 5px #212528;
  background: -webkit-linear-gradient(top,#474d54,#2f363d);
  background: -moz-linear-gradient(top,#474d54,#2f363d);
  background: -ms-linear-gradient(top,#474d54,#2f363d);
  background: -o-linear-gradient(top,#474d54,#2f363d);
  background: linear-gradient(top,#474d54,#2f363d);
}
.button:nth-child(3n){
  margin-right: 35px;
}
.button:hover{
  background: -webkit-linear-gradient(top,#5b6167,#30373e);
  background: -moz-linear-gradient(top,#5b6167,#30373e);
  background: -ms-linear-gradient(top,#5b6167,#30373e);
  background: -o-linear-gradient(top,#5b6167,#30373e);
  background: linear-gradient(top,#5b6167,#30373e);
}
.button:active{
  box-shadow: 0 1px #484c50;
  background: -webkit-linear-gradient(top,#232930,#3c4249);
  background: -moz-linear-gradient(top,#232930,#3c4249);
  background: -ms-linear-gradient(top,#232930,#3c4249);
  background: -o-linear-gradient(top,#232930,#3c4249);
  background: linear-gradient(top,#232930,#3c4249);	
}
.round,
.square{
  width: 30px;
  height: 30px;
}
.round,
.roundbig{
  border-radius:15px;
}
.square,
.squarebig{
  border-radius:5px;
}
.button:after{
  display: block;
}
.round:nth-of-type(1):after,
.square:nth-of-type(4):after{
  content: "\2716";
}
.round:nth-of-type(2):after,
.square:nth-of-type(5):after{
  content: "\2714";
}
.round:nth-of-type(3):after,
.square:nth-of-type(6):after{
  content: "\271a";
}
.round:nth-of-type(7):after,
.square:nth-of-type(10):after{
  content: "\2717";
}
.round:nth-of-type(8):after,
.square:nth-of-type(11):after{
  content: "\2713";
}
.round:nth-of-type(9):after,
.square:nth-of-type(12):after{
  content: "\271d";
}
.roundbig,
.squarebig{
  width: 80px;
  height: 30px;
}
	</style>
</head>
<body onload="init();"> 
<script>
      if( window.screen.width < 480 )
        document.querySelector("meta[name=viewport]").content="width=480, user-scalable=no";  
      else 
        document.querySelector("meta[name=viewport]").content="width=device-width, user-scalable=no"; 
</script>

<div class="page">
	<header id="header">
		<hgrounp class="white">
			<h2></h2><h2>
		
	</h2></hgrounp></header>
	<section class="demo">
<div class="controls_ui">
	<button type="button" class="button round"></button>
	<button type="button" class="button round"></button>
	<button type="button" class="button round"></button>

	<button type="button" class="button square"></button>
	<button type="button" class="button square"></button>
	<button type="button" class="button square"></button>

	<button type="button" class="button round"></button>
	<button type="button" class="button round"></button>
	<button type="button" class="button round"></button>

	<button type="button" class="button square"></button>
	<button type="button" class="button square"></button>
	<button type="button" class="button square"></button>

	<button type="button" id="up" class="button roundbig">UP</button>
	<button type="button" id="down" class="button roundbig">Down</button>
	<button type="button" id="left" class="button roundbig">Left</button>

	<button type="button" id="right" class="button squarebig">Right</button>
	<button type="button" id="brake" class="button squarebig">Brake</button>
	<button type="button" id="stop" class="button squarebig">Stop</button>
</div>
	</section>
</div>
<div style="text-align:center;clear:both">
<script type="text/javascript">
  var update_time = 500;
  var xmlHttp;
  var itime = 0;
  var ctime = 0;
  var stime = 0;

  var user_play = "";

  var dir = "up";
  var speed  = 50;

  var last_dir = "";

  function init()
  {   
    xmlHttp = createXmlHttpRequest();
    xmlHttp.onreadystatechange=OnMessage;
    heartbeat_timer = setInterval( function(){ update(); }, update_time );

    ids = ["up", "down", "left", "right"];
    for( i = 0; i < ids.length; i++ )
    {
      f = document.getElementById(ids[i]);
      f.addEventListener('touchstart', EvtHandle, false);   
      f.addEventListener('touchend',   EvtHandle, false);
      f.addEventListener('mousedown', EvtHandle, false);    
      f.addEventListener('mouseup',   EvtHandle, false); 
    }     
  }

  function update()
  {
    itime = itime + update_time;
    if( itime > 2000 )
    {
      //doSend( "" );
    }
    ctime = ctime + update_time;
    if( ctime >= 500 )
    {
      switch(user_play)
      {
        case "UD": dir = "up"; speed = speed + 20; if(speed > 250) speed = 250;  break;
        case "DD": dir = "down"; speed = speed - 20; if(speed < -250 ) speed = -250; break;
        case "LD": dir = "left"; break;
        case "RD": dir = "right"; break;
        default:
            if(speed != 0)
              speed = speed + (speed > 0 ? -10 : 10);
             dir = "release";  break;
      }
    }
    stime = stime + update_time;
    if( stime >= 1000 )
    { 
      if(!(dir == "release" && dir == last_dir) )
        doSend( "cmd?speed=" + (speed > 0 ? speed : -speed) + "&dir=" + (speed > 0 ? "up" : "down"));
    }
  }

  function createXmlHttpRequest() 
  {
    if (window.ActiveXObject) 
    { 
      return new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest)
    { 
      return new XMLHttpRequest();
    }
  }
  function doSend(message) 
  {
    itime = 0;
    last_dir = dir;
    console.log( message );
    xmlHttp.open("GET", "/" + message, true);
    xmlHttp.send(null);
  }

  function OnMessage()
  {
    if (xmlHttp.readyState==4)
    {// 4 = "loaded"
    
      if (xmlHttp.status==200)
      {// 200 = "OK"
        console.log("Problem retrieving data:" + xmlHttp.responseText );
        
      }
    }
  }

  function EvtHandle( evt )
  {
    var a = document.getElementById(evt.target.id);
    
    switch( evt.target.id + "," + evt.type )
    {
    /*case "up,mousedown":   */case "up,touchstart":   user_play = "UD"; evt.preventDefault(); break;//doSend("cmd?cmd=up&speed=100"); break;
    /*case "up,mouseup":     */case "up,touchend":     user_play = "";   evt.preventDefault();break;
    /*case "down,mousedown": */case "down,touchstart": user_play = "DD"; evt.preventDefault();break;
    /*case "down,mouseup":   */case "down,touchend":   user_play = "";   evt.preventDefault();break;
    /*case "left,mousedown": */case "left,touchstart": user_play = "LD"; evt.preventDefault();break;
    /*case "left,mouseup":   */case "left,touchend":   user_play = "";   evt.preventDefault();break;
    /*case "right,mousedown":*/case "right,touchstart": user_play = "RD";evt.preventDefault();break;
    /*case "right,mouseup":  */case "right,touchend":   user_play = "";  evt.preventDefault();break; 
    }
  }

</script>
</div>

</body></html>